<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

  
  <script type="text/javascript" src="//code.jquery.com/jquery-1.7.js"></script>
 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type="text/css">
    #playing,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;}
  </style>

  <title>HTML5 Audio with playlists</title>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;

var musicarr = ["https://ia801308.us.archive.org/35/items/nashville-rats_diamond-dogs/nashville-rats_diamond-dogs.mp3",
                "https://ia800205.us.archive.org/7/items/HAPPY_201601/HAPPY.mp3",
                "https://ia601604.us.archive.org/21/items/summersplace/summersplace.mp3",
                "https://ia902707.us.archive.org/21/items/wildaboutjoe/wildaboutjoe.mp3",
                      "https://ia800604.us.archive.org/16/items/DanceTheNightAway_201704/Dance%20The%20Night%20Away.mp3",
                  "https://ia601307.us.archive.org/32/items/BIGBALLSTIME_201507/BIG%20BALLS%20TIME.mp3",
              "https://ia600206.us.archive.org/33/items/GROUNDCONTROLTOTFOCK/GROUNDCONTROLTOTFOCK.mp3",
              
                 "https://ia801608.us.archive.org/6/items/metrymikegregndeb/meetscottrose.mp3",
                "https://ia801608.us.archive.org/6/items/metrymikegregndeb/metrymikelenrj.mp3",
                "https://ia601608.us.archive.org/6/items/metrymikegregndeb/meetscottrose.mp3",
                "https://ia801608.us.archive.org/6/items/metrymikegregndeb/metrymikegregndeb.mp3",
                      "https://ia601608.us.archive.org/6/items/metrymikegregndeb/coptrdocpromo.mp3",
                  "https://ia801608.us.archive.org/6/items/metrymikegregndeb/lenamsterdamshow2005%2bthistrackishot.mp3",
              "https://ia801608.us.archive.org/6/items/metrymikegregndeb/peaceinthebarnyard.mp3",
                 
               ];
shuffle(musicarr);

init();
function init(){
    current = 0;
    audio = $('audio');
    audio[0].volume = .90;
    len = musicarr.length;
    
    run(musicarr[current], audio[0]);
    
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
        }
        run(musicarr[current],audio[0]);
    });
}

function run(link, player){
        player.src = link;
        audio[0].load();
        audio[0].play();
        $('#playing').html("<ul><li><a>" + link+ "</a></li></ul>");     
}

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
});//]]> 

</script>

  
</head>

<body>
      <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
        
    </audio>
<div id="playing">
</div>
  
  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "vkMqR"
    }], "*")
  }
</script>

</body>

</html>